<template>
  <div>
    <div ref="sortDom" class="sortDom">
      <el-button class="btn" size="small" v-for="item,index in sortArr" type="primary" :key="index" :value="item" v-show="dict_player[item]">{{dict_player[item]}}</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['playerArr','dict_player','playerSortkey'],
    data() {
      return {
        sortArr: []
      }
    },
    created() {
      this.sortStart()
      this.sort()
    },
    methods: {
      sort() {
        this.$nextTick(() => {
          let sortDom = this.$refs.sortDom
          this.sortable = this.$sortable.create(sortDom,{
            handle: '.btn',
            disabled: false,
            onEnd: ({ item, newIndex, oldIndex })=>{
              this.sortEnd()
            }
          })
        })
      },
      sortStart() {
        this.sortArr = this.playerArr
      },
      sortEnd() {
        let domArr = this.$refs.sortDom.children
        let arr = []
        domArr.forEach(item=>{
          arr.push(item.value)
        })
        this.$emit('playerSortChange',arr)
      },
    },
    beforeDestroy () {
       if (this.sortable) {
         this.sortable.destroy()
       }
     },
  }
</script>

<style lang="scss" scoped>
  .sortDom{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .btn{
      margin: 5px;
    }
  }
</style>
